<template>
	<view>
		<navTop title="Release" :isHeight="false" hasBgc="white" :color="navtop.color" :isBack="true"></navTop>
		
		<form>
			<view>
				<image src="https://img01-xusong.91q.com/2D0DB9A9-B6DB-445C-96EC-9BEC6960D92C.png" class="act_name_icon"></image>
				<input class="act_name_input" v-model="activityData.eventName" placeholder="活动名称" placeholder-style="color:#C6C7CC"/>
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/14AC6D1A-1F65-4C7B-88DC-F80FA354A6C8.png" class="act_position_icon"></image>
				<input class="act_position_input" v-model="activityData.address" placeholder="活动地点" placeholder-style="color:#C6C7CC"/>
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/CA1759C9-F958-4F1F-B047-7AC2A0643FC2.png" class="act_type_icon"></image>
				<view class="act_type_input">
					<u--form>
						<u-form-item prop="activityData.type" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="activityData.type" disabled disabledColor="#ffffff" placeholder="活动类型"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-action-sheet :show="showSex" :actions="actions" title="请选择活动类型" @close="showSex = false"
							@select="sexSelect">
						</u-action-sheet>
					</u--form>
				</view>	
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/058EEE3A-2A66-4855-8E2C-CB3866008C07.png" class="act_belong_icon"></image>
				<view class="act_belong_input">
					<u--form>
						<u-form-item prop="activityData.department" borderBottom @click="showActivity = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="activityData.department" disabled disabledColor="#ffffff" placeholder="所属社团"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-action-sheet :show="showActivity" :actions="associationType" title="请选择所属社团" @close="showActivity = false"
							@select="departmentSelect">
						</u-action-sheet>
					</u--form>
				</view>
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/D59F2787-F1A8-4548-BFA7-86B00F88D022.png" class="act_time_icon"></image>
				<view class="act_time_start">
					<uni-datetime-picker type="datetime" v-model="activityData.startTime" placeholder="开始时间"  />
				</view>
				<view class="act_time_end">
					<uni-datetime-picker type="datetime" v-model="activityData.endTime" placeholder="结束时间" />
				</view>
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/E1A0433D-C8C0-4B23-BB06-8C32B74307D8.png" class="act_orgnizer_name_icon"></image>
				<!-- <input class="act_orgnizer_name_input" v-model="activityData.name" placeholder="发起人姓名" placeholder-style="color:#C6C7CC"/> -->
				<input class="act_orgnizer_name_input" v-model="activityData.name" placeholder="活动主题" placeholder-style="color:#C6C7CC"/>
			</view>

			<view>
				<image src="https://img01-xusong.91q.com/B84479F9-F077-4226-AF0F-C73F6271FE7D.png" class="act_number_icon"></image>
				<input class="act_number_input" v-model="activityData.peopleNumber" placeholder="限制人数"  placeholder-style="color:#C6C7CC"/>
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/3BADAD01-733D-4BC4-98A0-64A9C1A31DAA.png" class="act_sign_icon"></image>
				<view class="act_sign_input">
					<u--form>
						<u-form-item prop="typeData.type" borderBottom @click="showSign = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="typeData.type" disabled disabledColor="#ffffff" placeholder="是否签到"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-action-sheet :show="showSign" :actions="qiandao" title="请选择是否签到" @close="showSign = false"
							@select="signSelect">
						</u-action-sheet>
					</u--form>
				</view>
			</view>
			<view>
				<image src="https://img01-xusong.91q.com/958D76E4-8896-4F6E-8811-E1E533F8A1B2.png" class="act_introduce_icon"></image>
				<textarea class="act_introduce_input" v-model="activityData.introduce" placeholder="活动简介" placeholder-style="color:#C6C7CC"></textarea>
			</view>
			
		</form>
		
		<button class="confirm" @click="confirm">提交</button>
		<button class="confirm2" @click="dismissAct()">解散活动</button>
		<view class="bottom">~~已经到底啦~~</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import navTop from '../../components/navTop.vue'
	export default {
		components: {
			navTop
		},
		data(){
			return{
				user_Id:this.$store.state.userInfo.id,
				message:'申请发布活动成功，请等待审核',
				typeData:{
					type:'',
				},
				activityData:{
					id: 0,
					eventName:'',
					userId:this.$store.state.userInfo.id,
					address:'',
					type:'',
					department:'',
					startTime:'',
					endTime:'',
					name:'',
					phoneNumber:'',
					peopleNumber:0,
					organizationId:0,
					signIn:0,
					introduce:'',
					longitude:0,
					latitude:0,
				},
				qiandao: [
					{
						name:'是',
					},
					{
						name:'否',
					},
				],
				actions: [
					{
						name: '社会实践',
					},
					{
						name:'学术科学'
					},
					{
						name:'志愿服务'
					},
					{
						name:'文体艺术'
					},
					{
						name:'其他'
					}
				],
				associationType:[],
				showSex: false,
				showSign: false,
				showActivity: false,
				fileList1: [],
				navtop: {
					title: 'XXX',
					color: '#000000'
				},
			}
		},
		onShow() {
			this.getAssociationInfor()
		},
		methods:{
			dismissAct(){
					let that=this
					uni.showModal({
						title: '你确定要解散社团吗',
						success: function(res) {
							if (res.confirm) {
								uni.request({
									url:'https://www.codingyt.com/club/event/delete',
									data:{
										id:that.activityData.id,
									},
									method:'POST',
									success(res) {
										
									}
								})
								
							} else if (res.cancel) {
								
							}
						}
					});
				
			},
			departmentSelect(e){
				let that=this;
				// console.log('所选的社团的名字是');
				// console.log(e.name);
				//获取这个社团的id进行绑定关系
				uni.request({
					url:'https://www.codingyt.com/club/organization/select',
					data:{
						name:e.name
					},
					success(res) {
						that.activityData.department=e.name
						that.activityData.organizationId=res.data.data[0].id
						
					}
				})
			},
			getAssociationInfor(){
				let that=this;
				uni.request({
					url:'https://www.codingyt.com/club/userOrganization/select',
					data:{
						userId:this.user_Id,
						role:"president"
					},
					success(res) {
						
						let data=[]
						var tmpdata=res.data.data
						for (var i = 0; i < tmpdata.length; i++) {
							if(tmpdata[i].role=='president'){
								data.push(tmpdata[i])
							}
						}
						that.associationType=data
					},
				})
			},
			confirm(){
				let that=this
				uni.showModal({
					title: '确定要发布该活动吗？',
					content: '确定后请耐心等待审核',
					success: function (res) {
						if (res.confirm) {
							
							that.uploadFilePromise();
							that.uploadMessage();
							uni.navigateBack({
								delta:1,
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			//发送消息
			uploadMessage(){
				let userId = this.user_Id
				let msg = this.message
				uni.request({
				    url: 'https://www.codingyt.com/club/message/insert', //仅为示例，并非真实接口地址。
					method:'POST',
					dataType: 'json',
				    data: {
				        msg,
						userId
				    },
				    success: (res) => {
				       
				    }
				});
			},
			//图片上传提交
			uploadFilePromise(url) {
				let data = this.activityData
				//进行if的判断
				if((data.address!="")&&(data.event_name!="")&&
				(data.type!="")&&(data.department!="")&&
				(data.start_time!="")&&(data.end_time!="")
				// &&(data.name!="")&&(data.phonenumber!="")
				&&(data.people_number!="")&&(data.introduce!="")){
					uni.request({
						url:'https://www.codingyt.com/club/event/update',
						data:data,
						success(res) {
							// console.log(res.data);
						},
					})
					
				}else{
					uni.showModal({
						content:'请完善活动信息'
					})
				}
			},
			
			hideKeyboard() {
				uni.hideKeyboard()
			},
			sexSelect(e) {
				this.activityData.type = e.name
			},
			signSelect(e) {
				this.typeData.type = e.name
				if(e.name==="是"){
					this.activityData.signIn = 1;
				}else{
					this.activityData.signIn = 0;
				}
			},
		},
		onLoad(val) {
			let data=JSON.parse(val.content)
			this.activityData=data
		},
	}
</script>

<style scoped>
	.act_name_icon{
		left: 26rpx;
		top: 206rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
	}
	.act_name_input{
		left: 118rpx;
		top: 198rpx;
		width: 570rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_position_icon{
		left: 26rpx;
		top: 328rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
	}
	.act_position_input{
		left: 118rpx;
		top: 320rpx;
		width: 570rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_type_icon{
		left: 26rpx;
		top: 450rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
	}
	.act_type_input{
		left: 118rpx;
		top: 442rpx;
		width: 172rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_belong_icon{
		left: 372rpx;
		top: 458rpx;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
	}
	.act_belong_input{
		left: 454rpx;
		top: 442rpx;
		width: 234rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_time_icon{
		left: 32rpx;
		top: 572rpx;
		width: 58rpx;
		height: 58rpx;
		position: absolute;
	}
	.act_time_start{
		left: 118rpx;
		top: 564rpx;
		width: 598rpx;
		height: 74rpx;
		line-height: 40rpx;
		padding-right: px;
		border-radius: 6rpx;
		background-color: rgba(245, 245, 245, 100);
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		
		position: absolute;
	}
	.act_time_end{
		left: 118rpx;
		top: 682rpx;
		width: 598rpx;
		height: 74rpx;
		line-height: 40rpx;
		border-radius: 6rpx;
		background-color: rgba(245, 245, 245, 100);
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_orgnizer_name_icon{
		left: 26rpx;
		top: 808rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
	}
	.act_orgnizer_name_input{
		left: 118rpx;
		top: 800rpx;
		/*原长度*/
		/* width: 172rpx; */
		width: 570rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_orgnizer_phone_icon{
		left: 378rpx;
		top: 818rpx;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
	}
	.act_orgnizer_phone_input{
		left: 454rpx;
		top: 800rpx;
		width: 234rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_number_icon{
		left: 30rpx;
		top: 920rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
	}
	.act_number_input{
		left: 116rpx;
		top: 916rpx;
		width: 150rpx;
		height: 84rpx;
		padding-left: 28rpx;
		border-radius: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_sign_icon{
		left: 366rpx;
		top: 916rpx;
		width: 86rpx;
		height: 86rpx;
		position: absolute;
	}
	.act_sign_input{
		left: 454rpx;
		top: 920rpx;
		width: 180rpx;
		height: 84rpx;
		padding-left: 28rpx;
		line-height: 40rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		border: 2rpx solid rgba(245, 166, 35, 100);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border-radius: 40rpx;
		position: absolute;
	}
	.act_introduce_icon{
		left: 26rpx;
		top: 1034rpx;
		width: 82rpx;
		height: 82rpx;
		position: absolute;
	}
	.act_introduce_input{
		left: 118rpx;
		top: 1034rpx;
		width: 518rpx;
		height: 200rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		line-height: 40rpx;
		border-radius: 50rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border: 2rpx solid rgba(245, 166, 35, 100);
		position: absolute;
	}
	.act_img_title{
		left: 50rpx;
		top: 1340rpx;
		width: 228rpx;
		height: 50rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-weight: 550;
		font-family: SourceHanSansSC-regular;
		position: absolute;
	}
	.act_img_input{
		left: 50rpx;
		top: 1420rpx;
		width: 156rpx;
		height: 156rpx;
		background-color: rgba(108, 108, 108, 100);
		position: absolute;
	}
	.confirm{
		left: 154rpx;
		top: 1660rpx;
		width: 460rpx;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 24rpx;
		background-color:#F5A623;
		color: white;
		font-size: 40rpx;
		text-align: center;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		position: absolute;
	}
	.confirm2{
		left: 154rpx;
		top: 1460rpx;
		width: 460rpx;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 24rpx;
		background-color:#ff0000;
		color: white;
		font-size: 40rpx;
		text-align: center;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		position: absolute;
	}
	.bottom{
		left: 284rpx;
		top: 1860rpx;
		width: 400rpx;
		height: 38rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 26rpx;
		text-align: left;
		  ;
		position: absolute;
	}

</style>
